// 产品管理——评论管理
import styles from './index.less';
import { useEffect, useState } from 'react';
import { Form, Input, Button, Select, Tooltip, Table, Space } from 'antd';
import {  SearchOutlined,  DeleteOutlined,  SyncOutlined,  AppstoreOutlined,  EditOutlined,} from '@ant-design/icons';
import { ProdCommModelState, useDispatch, useSelector } from 'umi';

export default function ProdProdComm() {
  const dispatch = useDispatch();
  const [form] = Form.useForm();
  const { Option } = Select;
  
  useEffect(() => {
    dispatch({
      type: 'prodProdComm/getProdComm',
      payload: {
        page: 1,
        pageSize: 10,
      },
    });
  }, []);
  const { ProdComm } = useSelector(  (state: { prodProdComm: ProdCommModelState }) => state.prodProdComm,);
  console.log(ProdComm);
  
  const [isShow, setIsShow] = useState(true)
  const columns = [
    {
      title: '序号',
      dataIndex: 'number',
    },
    {
      title: '商品名',
      dataIndex: 'shopname',
    },
    {
      title: '用户昵称',
      dataIndex: 'usename',
    },
    {
      title: '记录时间',
      dataIndex: 'writetime',
    },
    {
      title: '回复时间',
      dataIndex: 'recoverytime',
    },
    {
      title: '评价得分',
      dataIndex: 'evaluate',
    },
    {
      title: '是否匿名',
      dataIndex: 'anonymity',
    },
    {
      title: '启用状态',
      dataIndex: 'status',
      render: (status: number) => (status == 0 ? '待审核' : '审核通过'),
    },
    {
      title: '操作',
      render: () => (
        <Space size="middle">
          <Button type="primary" icon={<EditOutlined />}>
            修改
          </Button>
          <Button type="primary" danger icon={<DeleteOutlined />}>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  //提交表单
  const onFinish = (values: any) => {
    console.log(values);
  };
  //清除搜索框内容
  const onReset = () => {
    form.resetFields();
  };
  //   改变选择器回调
  function handleChange(value: any) {
    console.log(`selected ${value}`);
  }

  const onDisplay = () => {};

  const onFlag = () => {
    setIsShow(!isShow)
  };

  const changePage = (page: number, pageSize: number) => {
    dispatch({
      type: 'prodProdComm/getProdComm',
      payload: {
        page: page,
        pageSize: pageSize,
      },
    });
  };
  return (
    <div className={styles.prodComm}>
      {
        isShow ?<Form name="control-hooks" onFinish={onFinish} layout="inline" form={form}>
        <Form.Item  name="name"  label="商品名"  className={styles.pordComm_from_item}>
          <Input placeholder="商品名" />
        </Form.Item>
        <Form.Item  label="状态"  name="status"  className={styles.pordComm_from_item}>
          <Select
            placeholder="审核状态"
            style={{ width: 120 }}
            allowClear
            onChange={handleChange}
          >
            <Option value="draft">待审核</Option>
            <Option value="publish">审核通过</Option>
            <Option value="fail">审核未通过</Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button  type="primary"  className={styles.pordComm_button_search}  icon={<SearchOutlined />}>
            搜索
          </Button>
        </Form.Item>
        <Form.Item>
          <Button  htmlType="button"  className={styles.pordComm_button_reset} onChange={onReset} icon={<DeleteOutlined />}>
            清空
          </Button>
        </Form.Item>
      </Form>:null
      }
      <div className={styles.prodComm_menu}>
        <div className={styles.prodComm_menu_left}></div>
        <div className={styles.prodComm_menu_right}>
        <Tooltip title="刷新">
            <Button
              shape="circle"
              icon={<SyncOutlined style={{ fontSize: '12px' }} />}
              size="large"
              className={styles.prodComm_menu_button}
            />
          </Tooltip>
          <Tooltip title="显隐">
            <Button
              shape="circle"
              icon={<AppstoreOutlined style={{ fontSize: '12px' }} />}
              size="large"
              onClick={onDisplay}
              className={styles.prodComm_menu_button}
            />
          </Tooltip>
          <Tooltip title="搜索">
            <Button
              shape="circle"
              icon={<SearchOutlined style={{ fontSize: '12px' }} />}
              size="large"
              onClick={onFlag}
              className={styles.prodComm_menu_button}
            />
          </Tooltip>
        </div>
      </div>
      <div className={styles.prodComm_table}>
        <Table className={styles.table}
            pagination={{
              total: ProdComm.pages,
              showSizeChanger: true,
              showQuickJumper: true,
              showTotal: total => `共 ${total} 条`,
              onChange:(page,pageSize)=>{
                  changePage(page,pageSize)
              }
            }}
            
            bordered={true}
            rowKey="hotSearchId"
            columns={columns}
            dataSource={ProdComm.records}
        />
      </div>
    </div>
  );
}
